.header{
  /*vh：1vh等于视口高度的1%。*/
  height: 95vh;

  /*此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
  background-size: cover;
  /*设置背景图像的起始位置*/
  background-position: top;
  /*多边形裁切*/
  clip-path: polygon(0 0,100% 0,100% 75vh,0 100%);
  position: relative;

  .logo-box{
    position: absolute;
    top: 4rem;
    left: 4rem;
    .logo{
      height: 3.5rem;
    }
  }

  .text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    /*https://www.w3cplus.com/content/css3-transform
    translate水平移动，这个百分比是自己的百分比*/
    transform: translate(-50%,-50%);
    /*整体居中,因为按钮是inline-block可以按照文字来处理*/
    text-align: center;

    .heading-primary{
      color: $color-white;
      text-transform: uppercase;
      /*防止震动*/
      backface-visibility: hidden;
      .heading-primary-main{
        display: block;
        font-size: 6rem;
        letter-spacing: 3.5rem;
        font-weight: 400;

        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        /*animation-delay: 3s;*/
      }
      .heading-primary-sub{
        display: block;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 1.7rem;

        animation: moveInRight 1s ease-out;
      }

    }
  }
}
